<template>
    <div class="page_container">
        <div class="logo"><img src="/favicon.ico" alt=""></div>
        <div class="hello">
            <div class="hello-text">{{ hello }}</div>
            <div class="everydayWord">{{ everydayWord }}</div>
        </div>
        <div class="section-title">博客统计</div>
        <van-grid :border="false" :column-num="3" class="articles">
            <van-grid-item>
                <div class="item">
                    <div class="item-count">
                        {{ articleStatistic.articleTotal }}
                    </div>
                    <div class="item-label">总文章数</div>
                </div>
            </van-grid-item>
            <van-grid-item>
                <div class="item">
                    <div class="item-count">
                        {{ articleStatistic.articleMonth }}
                    </div>
                    <div class="item-label">本月文章数</div>
                </div>
            </van-grid-item>
            <van-grid-item>
                <div class="item">
                    <div class="item-count">
                        {{ articleStatistic.articleYear }}
                    </div>
                    <div class="item-label">今年文章数</div>
                </div>
            </van-grid-item>
        </van-grid>
        <div class="section-title">访问量统计</div>
        <van-grid :border="false" :column-num="2" class="articles">
            <van-grid-item>
                <div class="item">
                    <div class="item-count">
                        {{ visitStatistic.totalVisit }}
                    </div>
                    <div class="item-label">总访问量</div>
                </div>
            </van-grid-item>
            <van-grid-item>
                <div class="item">
                    <div class="item-count">
                        {{ visitStatistic.todayVisit }}
                    </div>
                    <div class="item-label">今天访问量</div>
                </div>
            </van-grid-item>
            <van-grid-item>
                <div class="item">
                    <div class="item-count">
                        {{ visitStatistic.thisMonthVisit }}
                    </div>
                    <div class="item-label">本月访问量</div>
                </div>
            </van-grid-item>
            <van-grid-item>
                <div class="item">
                    <div class="item-count">
                        {{ visitStatistic.thisYearVisit }}
                    </div>
                    <div class="item-label">今年访问量</div>
                </div>
            </van-grid-item>
        </van-grid>
        <div class="section-title">年度访问量折线图</div>
        <div id="visitLine"></div>
        <div class="section-title">最常访问 ip Top 10</div>
        <van-cell-group>
            <van-cell
                v-for="(v, k) in visitStatistic.ipTop10" :key="k"
                :title="v.ip" :value="`${v.c} 次`" />
        </van-cell-group>
    </div>
</template>

<script>
import { dashboard } from '@/api/dashboard'
import * as echarts from 'echarts'
export default {
    name: 'DashboardWap',
    data() {return {
        hello: '',
        everydayWord: '',
        visitStatistic: {
            yearHeatGrap: [],
            monthHeatGrap: [],
            thisMonthVisit: 0,
            thisYearVisit: 0,
            todayVisit: 0,
            totalVisit: 0,
            ipTop10: []
        },
        articleStatistic: {
            articleTotal: 0,
            articleMonth: 0,
            articleYear: 0
        }
    }},
    mounted() {
        this.getData()
        this.getHello()
    },
    methods: {
        getHello() {
            const d = new Date()
            const hour = d.getHours()
            if (hour >= 4 && hour < 9) {
                this.hello = '早呀 !'
            } else if (hour >= 9 && hour < 11) {
                this.hello = '上午好 !'
            } else if (hour >= 11 && hour < 13) {
                this.hello = '午安 ~'
            } else if (hour >= 13 && hour < 17) {
                this.hello = '下午好 ~'
            } else if (hour >= 17 && hour < 19) {
                this.hello = '吃了没？'
            } else if (hour >= 19 && hour < 23) {
                this.hello = '晚上好~'
            } else if (hour >= 23 || hour < 4) {
                this.hello = '夜深了...'
            } else {
                this.hello = '你电脑的表好像坏了？'
            }
        },
        getData() {
            dashboard({}).then(res => {
                this.everydayWord = res.data.everydayWord
                this.visitStatistic = res.data.visitStatistic
                this.articleStatistic = res.data.articleStatistic
                this.drawVivitLine()
            })
        },
        drawVivitLine() {
            const option = {
                xAxis: {
                    type: 'category',
                    data: this.visitStatistic.yearHeatGrap.map(v => v.create_date)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.visitStatistic.yearHeatGrap.map(v => v.c),
                        type: 'line'
                    }
                ]
            }
            let grap = echarts.init(document.getElementById('visitLine'))
            grap.setOption(option)
        }
    }
}
</script>

<style lang="scss" scoped>
.page_container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 50px;
    .logo {
        display: flex;
        flex-direction: row;
        img {
            width: 50vw;
        }
    }
    .hello {
        display: flex;
        flex-direction: column;
        margin: 0 30px;
        .hello-text {
            font-size: 3em;
            font-weight: 500;
        }
        .everydayWord {
            font-size: 1em;
        }
    }
    .section-title {
        margin-left: 30px;
        font-size: 2em;
        font-weight: 500;
        margin-top: 40px;
    }
    .articles {
        display: flex;
        flex-direction: row;
        margin-left: 30px;
        margin-top: 10px;
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 24px;
            .item-count {
                font-size: 1.5em;
                font-weight: 700;
            }
            .item-label {
                font-size: 1em;
            }
        }
    }
    #visitLine {
        width: 100%;
        min-height: 400px;
        margin-left: 20px;
        margin: 10px 20px 0 10px;
    }
}
</style>
